@import (reference) '~weaver-mobile/dist/weaver-mobile.less';

//自定义变量
.translateX(@value){
    transform: translateX(@value * @hd);
};
.translateY(@value){
    transform: translateY(@value * @hd);
};

@value_20:20*@hd;
@value_50:50*@hd;

//文字大小
@word-fontSize-12: 12*@hd;
@word-fontSize-14: 14*@hd;
@word-fontSize-16: 16*@hd;
@word-fontSize-18: 18*@hd;
@word-fontSize-20: 20*@hd;

html,body{
    width: 100%;
    height:100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size:@word-fontSize-14;
    box-sizing: border-box;
    background: #fff;
    opacity: 0;
    animation: page-fade-in 1s forwards;
    //移动端手机页面 禁用/阻止长按进行复制粘贴选择的操作
    -webkit-touch-callout:none;
    -webkit-user-select:none; 
    -khtml-user-select:none; 
    -moz-user-select:none;
    -ms-user-select:none; 
    user-select:none;
    input,texteare{
        -webkit-user-select:auto;
    } 

    .icon-svg {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }


    @keyframes page-fade-in {
        0% {
        opacity: 0
        }
        
        100% {
        opacity: 1
        }
    }
}
#root{
    height: 100%;
    width: 100%;
    overflow: hidden;
}


/****************  弹性布局--img    *****************/
.fna-flex-img{
    flex-wrap: wrap;
    .fna-flex-img-item{
        margin-left: 0;
        // flex:0 1 33.3333333%;
        justify-content:space-around;
        .fna-flex-img-item-icon{
            img{
                width: 100*@hd;
                height: auto;
            }
        }
        .fna-flex-img-item-text{
            font-size: 14 * @hd;
            color: #2D2D2D;
            text-align: center;
            margin-bottom: 10 * @hd;
        }
    }
}

//2列弹性布局--img  
.fna-flex-img-02{
    .fna-flex-img-item{
        flex:0 1 50%;
       
    }
}

//3列弹性布局--img  
.fna-flex-img-03{
    .fna-flex-img-item{
        flex:0 1 33.3333333%;
       
    }
}

//4列弹性布局--img  
.fna-flex-img-04{
    .fna-flex-img-item{
        flex:0 1 25%;
       
    }
}

/****************  弹性布局--icon    *****************/
.fna-flex-icon{
    flex-wrap: wrap;
    .fna-flex-icon-item{
        // flex: 1 1 25%;
        margin-left: 0;
        .fna-flex-icon-item-icon{
            padding: 10 * @hd;
            border-radius: 40px;
            color: #0E81DF;
            height: 30 * @hd;
            width: 30 * @hd;
            line-height: 50 * @hd;
            margin: 0 auto;
            // .translateX(15);
            text-align: center;
            svg{
                width: 100%;
                height: 100%;
            }
        }
        .fna-flex-icon-item-text{
           font-size: 14 * @hd;
           color: #2D2D2D;
           text-align: center;
           margin-bottom: 10 * @hd;
        }
    }
}

//2列弹性布局--icon  
.fna-flex-icon-02{
    .fna-flex-icon-item{
        flex: 0 1 50%;
    }
}

//3列弹性布局--icon  
.fna-flex-icon-03{
    .fna-flex-icon-item{
        flex: 0 1 33.33333333%;
    }
}

//4列弹性布局--icon  
.fna-flex-icon-04{
    .fna-flex-icon-item{
        flex: 0 1 25%;
    }
}

//8列弹性布局--icon  
.fna-flex-icon-08{
    .fna-flex-icon-item{
        flex: 0 1 12.5%;
    }
}

.word-fontSize-12{
    font-size:@word-fontSize-12;
}

.word-fontSize-14{
    font-size:@word-fontSize-14;
}

.word-fontSize-16{
    font-size:@word-fontSize-16;
}

.word-fontSize-20{
    font-size:@word-fontSize-20;
}

.fna-textColor-red{ color: red !important;font-weight: bold !important;}

//背景色
.bgColor_f3f{ background: #F3F7FE;}
.bgColor_fff{ background: #fff !important;}

//发票样式  -- 垂直
.fna-incoice-v{
    width: 100%;
    margin: 0px auto;
    box-shadow: 0 1px 4px 0 rgba(142,142,142,0.23);
    h4{
        font-weight:normal;
        font-size:@word-fontSize-14;
        width: 100%;
        margin: 0;
        padding-top: 10px;
        background: #F5F5F5 padding-box;
        div{
            width: 90%;
            margin: 0 auto;
            background: #F5F5F5;
            overflow: hidden;
        }
        span:nth-child(1){
            float: left;
        }
        span:nth-child(2){
            float: right;
        }
    }

    img{
        width: 100%;
        // position: relative;
        // top: 0px;
    }
    & > div{
        padding: 0 5%;
        line-height: 30px;
        background: #FFFFFF;
    }
}


/* 费用类型 图标背景色 统一写 */
.accommodation-1_div {background: #FFE7DF;}
.accommodation-1_div > svg {color: #FF531F;}

.traffic-1_div {background: #EAF0FE;}
.traffic-1_div > svg {color: #3F71FE;}

.aircraft_div {background: #FFF4DF;}
.aircraft_div > svg {color: #EBBA0A;}

.train_div {background: #FFDFE6;}
.train_div > svg {color: #FE3D6F;}

.bus_div {background: #DFFFF2;}
.bus_div > svg {color: #1FC2B0;}

.icon-didichuhang_div {background: #FFF4DF;}
.icon-didichuhang_div > svg {color: #F5AB16;}

.replenish-oil_div {background: #DFFFF2;}
.replenish-oil_div > svg {color: #1FC2B0;}

.office_div {background: #EAF0FE;}
.office_div > svg {color: #3F71FE;}

.communication_div {background: #FFF4DF;}
.communication_div > svg {color: #EBBA0A;}

.catering_div {background: #FFDFE6;}
.catering_div > svg {color: #FE3D6F;}

.business-hospitality_div {background: #EAF0FE;}
.business-hospitality_div > svg {color: #2A6FFF;}

.Others_div {background: #FFE7DF;}
.Others_div > svg {color: #FF531F;}

//日历样式  form
.fna-form-calendar{
    transform: none !important;
    .am-list-body{
        .am-list-item{
            padding-left: 0;
            margin-left: 22px;
            .am-list-line{
                border-bottom: 0;
            }
        }
    }
}
